<template>
  <div>
    <!-- 页签 -->
    <el-tabs>
      <el-tab-pane label="登录账户设置">
        <!-- 表单 -->
        <el-form ref="formRef" :model="form" :rules="rules" size="medium" label-width="100px" style="width:350px;margin-left:100px">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="form.username" placeholder="请输入用户名" clearable :style="{width: '100%'}"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="form.password" placeholder="请输入密码" clearable show-password :style="{width: '100%'}">
            </el-input>
          </el-form-item>
          <el-form-item size="large">
            <el-button type="primary" @click="submitForm">更新</el-button>
            <!-- <el-button @click="resetForm">重置</el-button> -->
          </el-form-item>
        </el-form>
        <!-- 表单 -->
      </el-tab-pane>
      <el-tab-pane label="配置管理">
        <!-- 使用组件 -->
        <user-info></user-info>
      </el-tab-pane>
      <el-tab-pane label="角色管理">
        <!-- 使用组件 -->

        <job-info></job-info>
      </el-tab-pane>
    </el-tabs>
    <!-- 页签 /-->

  </div>
</template>

<script>
import { getEmplyeeBaseInfo } from '@/api/user'
import { saveUserDetailById } from '@/api/Employees'
import UserInfo from './components/user-info.vue'// 引入组件
import JobInfo from './components/job-info.vue'// 引入组件
export default {
  name: 'EmployeeDetail',
  components: { UserInfo, JobInfo }, // 注册组件

  props: {
    id: {
      type: [Number, String],
      required: true

    }
  },
  data() {
    return {
      form: {
        username: undefined,
        password: undefined
      },
      rules: {
        username: [{
          required: true,
          message: '请输入用户名',
          trigger: 'blur'
        }],
        password: [{
          required: true,
          message: '请输入密码',
          trigger: 'blur'
        }]
      }
    }
  },
  async created() {
    this.form = await getEmplyeeBaseInfo(this.id)// 调用获取员工基本信息的接口获取员工用户名做数据回显
    this.form.password = ''// 清空密码
  },
  mounted() {},
  methods: {
    submitForm() {
      this.$refs['formRef'].validate(async valid => {
        if (!valid) return
        // TODO 提交表单
        await saveUserDetailById(this.form)// 发请求修改密码并保存密码
        this.$message.success('操作成功')// 修改成功后提示成功
      })
    }
    // resetForm() {
    //   this.$refs['formRef'].resetFields()
    // }
  }
}

</script>

<style lang="scss" scoped>

</style>
